<template>
	<view class="container">
		<tui-cropper :isRound="isRound" :imageUrl="imageUrl" @ready="ready" @cropper="cropper"></tui-cropper>
		<view class="tui-btn__box">
			<view class="tui-btn__custom" @tap="chooseImage">选择图片</view>
			<view class="tui-btn__custom" @tap="round">{{ roundText }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			src: '',
			imageUrl: '',
			isRound: true,
			roundText: '显示方形裁剪框'
		};
	},
	onLoad(options) {
		this.src = options.src || '';
		this.src &&
			uni.showLoading({
				title: '请稍候...',
				mask: true
			});
	},
	methods: {
		ready() {
			this.imageUrl = this.src;
		},
		cropper(e) {
			//裁剪完成后处理逻辑
			uni.previewImage({
				current: '',
				urls: [e.url]
			});
		},
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					this.imageUrl = tempFilePaths;
				}
			});
		},
		round() {
			this.isRound = !this.isRound;
			this.roundText = this.isRound ? '显示方形裁剪框' : '显示圆形裁剪框';
		}
	}
};
</script>

<style>
.tui-btn__box {
	position: fixed;
	top: 120rpx;
	z-index: 100;
	color: #fff;
	font-size: 28rpx;
	display: inline-flex;
	left: 50%;
	transform: translateX(-50%);
}
.tui-btn__custom {
	border: 1px solid #fff;
	padding: 4px 8px;
	white-space: nowrap;
}
.tui-btn__custom:first-child {
	border-right: 0;
}
</style>
